<template>
    <span class="i-layout-header-trigger i-layout-header-trigger-min" @click="showSetting">
        <Icon type="md-more" />

        <Drawer v-model="visible" width="280">
            <Divider size="small">主题风格设置</Divider>

            <div class="i-layout-header-setting-item">
                <div class="i-layout-header-setting-item-radio" :class="{ 'on': siderTheme === 'dark' }" @click="handleChangeSetting('siderTheme', 'dark')">
                    <Tooltip content="暗色侧边栏" placement="top" transfer>
                        <img src="@/assets/svg/nav-theme-dark.svg">
                    </Tooltip>
                </div>
                <div class="i-layout-header-setting-item-radio" :class="{ 'on': siderTheme === 'light' }" @click="handleChangeSetting('siderTheme', 'light')">
                    <Tooltip content="亮色侧边栏" placement="top" transfer>
                        <img src="@/assets/svg/nav-theme-light.svg">
                    </Tooltip>
                </div>
            </div>
            <div class="i-layout-header-setting-item">
                <div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'light' }" @click="handleChangeSetting('headerTheme', 'light')">
                    <Tooltip content="亮色顶栏" placement="top" transfer>
                        <img src="@/assets/svg/nav-theme-dark.svg">
                    </Tooltip>
                </div>
                <div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'dark' }" @click="handleChangeSetting('headerTheme', 'dark')">
                    <Tooltip content="暗色顶栏" placement="top" transfer>
                        <img src="@/assets/svg/header-theme-dark.svg">
                    </Tooltip>
                </div>
                <div class="i-layout-header-setting-item-radio" :class="{ 'on': headerTheme === 'primary' }" @click="handleChangeSetting('headerTheme', 'primary')">
                    <Tooltip content="主色顶栏" placement="top" transfer>
                        <img src="@/assets/svg/header-theme-primary.svg">
                    </Tooltip>
                </div>
            </div>

            <Divider size="small">导航设置</Divider>

            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">固定侧边栏</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="siderFix" @on-change="(val) => handleChangeSetting('siderFix', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">固定顶栏</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="headerFix" @on-change="(val) => handleChangeSetting('headerFix', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
                <span class="i-layout-header-setting-item-desc">
                    下滑时隐藏顶栏
                    <Tooltip placement="top" content="需开启固定顶栏" transfer>
                        <Icon type="ios-help-circle-outline" />
                    </Tooltip>
                </span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="headerHide" :disabled="!headerFix" @on-change="(val) => handleChangeSetting('headerHide', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !headerFix }">
                <span class="i-layout-header-setting-item-desc">
                    置顶顶栏
                    <Tooltip placement="top" content="需开启固定顶栏" transfer>
                        <Icon type="ios-help-circle-outline" />
                    </Tooltip>
                </span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="headerStick" :disabled="!headerFix" @on-change="(val) => handleChangeSetting('headerStick', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">侧边栏开启手风琴模式</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="menuAccordion" @on-change="(val) => handleChangeSetting('menuAccordion', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">显示折叠侧边栏按钮</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showSiderCollapse" @on-change="(val) => handleChangeSetting('showSiderCollapse', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">侧边栏折叠时显示父级菜单名</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showCollapseMenuTitle" @on-change="(val) => handleChangeSetting('showCollapseMenuTitle', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">
                    显示全局面包屑导航
                    <Tooltip placement="top" content="headerMenu 开启时无效" transfer>
                        <Icon type="ios-help-circle-outline" />
                    </Tooltip>
                </span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showBreadcrumb" @on-change="(val) => handleChangeSetting('showBreadcrumb', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !showBreadcrumb }">
                <span class="i-layout-header-setting-item-desc">
                    全局面包屑显示图标
                    <Tooltip placement="top" content="需开启全局面包屑导航" transfer>
                        <Icon type="ios-help-circle-outline" />
                    </Tooltip>
                </span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showBreadcrumbIcon" :disabled="!showBreadcrumb" @on-change="(val) => handleChangeSetting('showBreadcrumbIcon', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">显示重载页面按钮</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showReload" @on-change="(val) => handleChangeSetting('showReload', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">显示多语言选择</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showI18n" @on-change="(val) => handleChangeSetting('showI18n', val)" />
                </span>
            </div>

            <Divider size="small">其它设置</Divider>

            <div class="i-layout-header-setting-item">
                <span class="i-layout-header-setting-item-desc">开启多页签</span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="tabs" @on-change="(val) => handleChangeSetting('tabs', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
                <span class="i-layout-header-setting-item-desc">
                    多页签显示图标
                    <Tooltip placement="top" content="需开启多页签" transfer>
                        <Icon type="ios-help-circle-outline" />
                    </Tooltip>
                </span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="showTabsIcon" :disabled="!tabs" @on-change="(val) => handleChangeSetting('showTabsIcon', val)" />
                </span>
            </div>
            <div class="i-layout-header-setting-item" :class="{ 'i-layout-header-setting-item-disabled': !tabs }">
                <span class="i-layout-header-setting-item-desc">
                    固定多页签
                    <Tooltip placement="top" content="需开启多页签" transfer>
                        <Icon type="ios-help-circle-outline" />
                    </Tooltip>
                </span>
                <span class="i-layout-header-setting-item-action">
                    <Switch size="small" :value="tabsFix" :disabled="!tabs" @on-change="(val) => handleChangeSetting('tabsFix', val)" />
                </span>
            </div>
            <Alert type="warning">
                <div slot="desc">
                    该功能主要实时预览各种布局效果，更多完整配置在 <strong>setting.js</strong> 中设置。建议在生产环境关闭该布局预览功能。
                </div>
            </Alert>
        </Drawer>
    </span>
</template>
<script>
    import { mapState, mapMutations } from 'vuex';

    export default {
        name: 'iHeaderSetting',
        data () {
            return {
                visible: false
            }
        },
        computed: {
            ...mapState('system/layout', [
                'siderTheme',
                'headerTheme',
                'headerStick',
                'siderFix',
                'headerFix',
                'headerHide',
                'menuAccordion',
                'showSiderCollapse',
                'tabs',
                'showTabsIcon',
                'tabsFix',
                'showBreadcrumb',
                'showBreadcrumbIcon',
                'showReload',
                'showI18n',
                'showCollapseMenuTitle'
            ])
        },
        methods: {
            ...mapMutations('system/layout', [
                'updateLayoutSetting'
            ]),
            showSetting () {
                this.visible = true;
            },
            handleChangeSetting (key, value) {
                this.updateLayoutSetting({
                    key,
                    value
                });
            }
        }
    }
</script>
